<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="/yanlei/css/shehui/public.css" rel="stylesheet" type="text/css">
<link href="/yanlei/css/shehui/style.css" rel="stylesheet" type="text/css">

<script src="/yanlei/js/shehui/echarts.min.js"></script>
</head>
<body>
	
	
	<div id="main"  >
		<div class="margin">
			<div class='left'>
				<h6>主要社会指标</h6>
				<ul class='title'>
					<li class='valign' class="active" index=0>人口</li>
					<li class='valign' index=1>科技</li>
					<li class='valign' index=2>就业</li>
					<li class='valign' index=3>卫计</li>
					<li class='valign' index=4>教育</li>
					<li class='valign' index=5>文化</li>
				</ul>
				<div style="display: block;" class='table'>
					<div class='population '>
						<ul class="first">
				        	<li >指标名<span></span></li>
				            <li >单位<span></span></li>
				            <li >数量</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >户籍人口</li>
				            <li >万人</li>
				            <li >40.317</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >人口密度</li>
				            <li >千人/平方公里</li>
				            <li >12.815</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >总户数</li>
				            <li >万户</li>
				            <li >12.123</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >人口自然增长率</li>
				            <li >百分比</li>
				            <li >-1.74</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >人口出生率</li>
				            <li >百分比</li>
				            <li >12.16</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >人口死亡率</li>
				            <li >百分比</li>
				            <li >13.89</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >常驻人口</li>
				            <li >万人</li>
				            <li >50</li>
			        	</ul>
					</div>
					<h4 class='valign ke'>人口</h4>
		        	<ul class="first">
			        	<li >单位：万</li>
		        	</ul>
		        	<div id="chartmain" style="width:450px; height: 300px;"></div>
				</div>
				<div class='table'>
					<div class=' population'>
						<ul class="first">
				        	<li >指标名<span></span></li>
				            <li >单位<span></span></li>
				            <li >数量</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >专利申请数</li>
				            <li ></li>
				            <li >5106</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >专利授权数</li>
				            <li ></li>
				            <li >2634</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >专利示范企业</li>
				            <li ></li>
				            <li >96</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >科技经费</li>
				            <li >万元</li>
				            <li >6302</li>
			        	</ul>
					</div>
					<h4 class='valign ke'>科技</h4>
		        	<ul class="first">
			        	<li >单位：个</li>
		        	</ul>
		        	<div id="chartmain1" style="width:450px; height: 300px;"></div>
				</div>
				<div class='table'>
					<div class=' population'>
						<ul class="first">
				        	<li >指标名<span></span></li>
				            <li >单位<span></span></li>
				            <li >数量</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >从业人员</li>
				            <li >万人</li>
				            <li >49.23</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >在岗职工</li>
				            <li >万人</li>
				            <li >43.892</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >城镇职工平均工资</li>
				            <li >万元</li>
				            <li >6.2346</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >登记失业率</li>
				            <li >每百人</li>
				            <li >3</li>
			        	</ul>
			        </div>
			        <h4 class='valign ke'>就业</h4>
		        	<ul class="first">
			        	<li >单位：万</li>
		        	</ul>
		        	<div id="chartmain2" style="width:450px; height: 300px;"></div>
			</div>
				<div class='table' >
					<div class=' population'>
						<ul class="first">
				        	<li >指标名<span></span></li>
				            <li >单位<span></span></li>
				            <li >数量</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >卫生机构数</li>
				            <li ></li>
				            <li >221</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >床位数</li>
				            <li ></li>
				            <li >3849</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >卫生技术人员</li>
				            <li ></li>
				            <li >4507</li>
			        	</ul>
			        	
			        </div>
			        <h4 class='valign ke'>卫计</h4>
		        	<ul class="first">
			        	<li >单位：个</li>
		        	</ul>
		        	<div id="chartmain3" style="width:450px; height: 300px;"></div>
			        	
				</div>
				<div class='table'>
					<div class=' population'>
						<ul class="first">
				        	<li >指标名<span></span></li>
				            <li >单位<span></span></li>
				            <li >数量</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >教育机构数</li>
				            <li ></li>
				            <li >71</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >在校学生数</li>
				            <li ></li>
				            <li >53860</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >中学学生数</li>
				            <li ></li>
				            <li >11204</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >小学学生数</li>
				            <li ></li>
				            <li >25813</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >教职工人数</li>
				            <li ></li>
				            <li >3451</li>
			        	</ul>
			        </div>
			        <h4 class='valign ke'>教育</h4>
		        	<ul class="first">
		        	<li >单位：个</li>
	        	</ul>
	        	<div id="chartmain4" style="width:450px; height: 300px;"></div>
				</div>
				
				<div class='table'>
					<div class=' population'>
						<ul class="first">
				        	<li >指标名<span></span></li>
				            <li >单位<span></span></li>
				            <li >数量</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >文化中心</li>
				            <li ></li>
				            <li >1</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >文化站</li>
				            <li ></li>
				            <li >8</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >社区文体活动室</li>
				            <li ></li>
				            <li >74</li>
			        	</ul>
			        	<ul class='two'>
				        	<li >公共电子阅览室</li>
				            <li ></li>
				            <li >74</li>
			        	</ul>
			        	<ul class='one'>
				        	<li >全民健身苑点</li>
				            <li ></li>
				            <li >219</li>
			        	</ul>
			        	
			        </div>
			        <h4 class='valign ke'>文化</h4>
			        	<ul class="first">
				        	<li >单位：个</li>
			        	</ul>
			        	<div id="chartmain5" style="width:450px; height: 300px;"></div>
				</div>
				
			</div>
			<div class='center'>
				<h3>8个街道展示</h3>
				<a class='tu'>
					<img src="/yanlei/img/shehui/tu.gif"  alt="下城区行政服务中心" width="400" height="540" usemap="#Map" longdesc="http://baike.baidu.com/item/下城区/161006?fr=aladdin" border="0" />
					<map name="Map" id="Map">
					  <area shape="circle" coords="187,104,20" href="#" title='石桥街道办事处'/>
					  <area shape="circle" coords="88,197,13" href="#" title='下城区行政服务中心'/>
					  <area shape="circle" coords="135,285,16" href="#" title='东新街道办事处' />
					  <area shape="circle" coords="64,374,18" href="#" title='朝晖街道办事处'/>
					  <area shape="circle" coords="175,418,21" href="#" title='文晖街道办事处'/>
					  <area shape="circle" coords="63,482,16" href="#" title='天水街道办事处'/>
					  <area shape="circle" coords="81,529,17" href="#" title='武林街道办事处'/>
					  <area shape="circle" coords="123,523,19" href="#" title='长庆街道办事处'/>
					  <area shape="circle" coords="161,518,19" href="#" title='潮鸣街道办事处'/>
					</map>
				</a>
			</div>
			<div class='right'>
				<h3>四个平台街道事件数据(测试数据)</h3>
				<p>
					<span>办件总数</span>
					<i >256728件</i>
				</p> 
				<p class='te'>
					<span>平均办件时长</span>
					<i >3.3天</i>
				</p> 
				<p>
					<span>每日办件数</span>
					<i >378件</i>
				</p> 
				<div id="chartmain11" style="width:640px; height: 400px;"></div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		//6个社会事件
		
	
        //指定图标的配置和数据
        //left图表chartmain
        var option = {
            title:{
                text:''
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["户籍人口","人口密度","总户数","常驻人口"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[40.317,12.123,12.123,50]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
        
        
        //left图表chartmain1
        var option = {
            title:{
                text:''
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["专利申请数","专利授权数","专利示范企业","科技经费"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[5106,2634,96,6302]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain1'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
        
        
        //left图表chartmain2
        var option = {
            title:{
                text:''
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["从业人员","在岗职工","平均工资","登记失业率"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[49.23,43.892,6.2346,3]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain2'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
		
      
      
      //left图表chartmain3
        var option = {
            title:{
                text:''
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["卫生机构数","床位数","卫生技术人员",]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[221,3849,4507]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain3'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
        
        //left图表chartmain4
        var option = {
            title:{
                text:''
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["教育机构数","在校学生数","中学学生数","小学学生数"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[71,53860,11204,25813]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain4'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
        
        //left图表chartmain
        var option = {
            title:{
                text:''
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["文化中心","文化站","文体活动室","电子阅览室",'健身苑点']
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[1,8,74,74,219]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain5'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
 
 
 
        //right图表chartmain11
        var labelOption = {
    normal: {
        show: false,

        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    }
};

option = {
    color: ['#335d82', '#6893bb', '#d9a73c', '#c79edc'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['综合管理','市场监管','综合执法','便民服务']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: ['天水街道','武林街道','长庆街道','潮鸣街道','朝晖街道','文晖街道','东新街道','石桥街道']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '综合管理',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            data: [499, 122, 316, 159, 155,0,115,144]
        },
        {
            name: '市场监管',
            type: 'bar',
            label: labelOption,
            data: [451, 134, 526, 188, 268,0,121,83]
        },
        {
            name: '综合执法',
            type: 'bar',
            label: labelOption,
            data: [984, 229, 1133, 501, 1206,0,421,144]
        },
        {
            name: '便民服务',
            type: 'bar',
            label: labelOption,
            data: [2954, 546, 674, 159, 759,0,248,216]
        }
    ]
};

//初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain11'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
        var oUl=document.getElementsByClassName('title')[0];
			var aLi=oUl.children;
			var aDiv=document.getElementsByClassName('left')[0].getElementsByClassName('table');
			         for(var i=0;i<aLi.length;i++){
			         	 aLi[i].onclick=function(){
			         	 	for(var i=0;i<aLi.length;i++){
			         	 		aLi[i].className='';
								aDiv[i].style.display='none';
			         	 	}
			    	   
							   this.className='active';
								aDiv[this.getAttribute('index')].style.display='block';
							 }
			         	 
							         	
			          }
        
    </script>
		
    
</body>
</html>

